<template>
  <div class="app-container">
    <div class="eval-title">
      <i class="el-icon-cpu"></i>
      <span>智能测评分析</span>
    </div>
    <div class="eval-subtitle">输入学生学号，选择测评方式，AI将根据学生个人情况推荐最适合的志愿选择</div>

    <!-- 查询区域 -->
    <el-card class="main-card" shadow="hover">
      <div class="params-form">
        <el-form ref="queryForm" :model="queryForm" :inline="true" label-width="80px">
          <el-form-item label="学生学号" prop="studentNo">
            <el-input
              v-model="queryForm.studentNo"
              placeholder="请输入学生学号"
              clearable
              prefix-icon="el-icon-user"
              style="width: 240px"
            />
          </el-form-item>
          
          <el-form-item label="测评方式">
            <el-radio-group v-model="evalType">
              <el-radio-button label="ai">AI智能测评</el-radio-button>
              <el-radio-button label="score">按分数测评</el-radio-button>
              <el-radio-button label="tag">按标签测评</el-radio-button>
              <el-radio-button label="comprehensive">综合测评</el-radio-button>
            </el-radio-group>
          </el-form-item>
          
          <div class="params-divider">
            <i class="el-icon-setting"></i>
            <span>AI分析参数</span>
          </div>
          
          <el-form-item label="分析维度">
            <el-select
              v-model="queryForm.dimensions"
              multiple
              collapse-tags
              placeholder="请选择分析维度"
              style="width: 380px"
            >
              <el-option
                v-for="item in dimensionOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div class="dimension-option">
                  <span>{{ item.name }}</span>
                  <el-tooltip :content="item.description" placement="right">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="推荐数量">
            <el-input-number
              v-model="queryForm.count"
              :min="1"
              :max="10"
              :step="1"
              controls-position="right"
            />
          </el-form-item>
          
          <el-form-item label="分析深度" class="depth-item">
            <div class="depth-control">
              <div class="depth-labels">
                <span 
                  v-for="level in 5" 
                  :key="level"
                  :class="['depth-label', { active: queryForm.depth === level }]"
                  @click="queryForm.depth = level"
                >
                  {{ getDepthLabel(level) }}
                </span>
              </div>
              <el-slider
                v-model="queryForm.depth"
                :min="1"
                :max="5"
                :step="1"
                :show-stops="true"
                :height="6"
                style="width: 380px"
              ></el-slider>
              <div class="depth-range">
                <span>浅</span>
                <span>深</span>
              </div>
            </div>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleEvaluate">开始测评</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    
    <!-- 结果区域 -->
    <div v-if="false">
      <!-- 结果内容将根据需求添加 -->
    </div>
  </div>
</template>

<script>
import { getAnalysisDimensions } from "@/api/entrance/evaluation";

export default {
  name: "AIEvaluate",
  data() {
    return {
      // 查询参数
      queryForm: {
        studentNo: '',
        dimensions: ['interest', 'career'],
        count: 5,
        depth: 3
      },
      
      // 测评类型
      evalType: 'ai',
      
      // 分析维度选项
      dimensionOptions: [],
      
      // 页面状态
      loading: false
    };
  },
  created() {
    this.getDimensions();
  },
  methods: {
    // 获取分析维度选项
    getDimensions() {
      getAnalysisDimensions().then(response => {
        this.dimensionOptions = response.data;
      });
    },
    
    // 执行测评
    handleEvaluate() {
      if (!this.queryForm.studentNo) {
        this.$message.warning('请输入学生学号');
        return;
      }
      
      // 提交测评请求逻辑
      this.$message.success('测评请求已提交');
    },
    
    // 重置查询
    resetQuery() {
      this.$refs.queryForm.resetFields();
    },
    
    // 获取深度标签
    getDepthLabel(level) {
      const labels = ['极简', '基础', '标准', '深入', '专业'];
      return labels[level-1];
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.eval-title {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
  
  i {
    font-size: 24px;
    color: #409EFF;
    margin-right: 10px;
  }
}

.eval-subtitle {
  color: #606266;
  margin-bottom: 20px;
}

.main-card {
  margin-bottom: 20px;
}

.params-form {
  padding: 10px 0;
  
  .params-divider {
    display: flex;
    align-items: center;
    color: #409EFF;
    font-weight: 600;
    margin: 15px 0;
    padding-left: 80px;
    
    i {
      margin-right: 5px;
    }
    
    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background-color: #EBEEF5;
      margin-left: 15px;
    }
  }
}

.dimension-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  i {
    color: #909399;
  }
}

.depth-item {
  display: block;
  margin-bottom: 22px;
  
  .depth-control {
    width: 380px;
    
    .depth-labels {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      
      .depth-label {
        font-size: 13px;
        color: #909399;
        cursor: pointer;
        padding: 2px 8px;
        border-radius: 10px;
        transition: all 0.3s;
        
        &:hover {
          color: #409EFF;
        }
        
        &.active {
          color: #fff;
          background-color: #409EFF;
        }
      }
    }
    
    .depth-range {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      color: #909399;
      font-size: 12px;
    }
    
    .el-slider {
      margin: 10px 0;
    }
  }
}
</style> 